<template>
  <div>
    <el-row style="margin: 20px" :gutter="10" type="flex" class="main">
      <el-col :span="7" class="left">
        <!-- 左边控件 -->
        <el-card class="leftControl">
          <div class="item selectBox">
            <div class="title">库区选择</div>
            <el-select
              v-model="warehouseId"
              placeholder="请选择"
              @change="getAreaData"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="item card">
            <el-input
              v-model="input"
              placeholder="请输入内容"
              suffix-icon="el-icon-search"
            />
            <div v-if="areaList.length > 0" class="btns">
              <el-button
                v-for="(item, index) in areaList"
                :key="item.id"
                type="warning"
                :class="{ active: activeIndex === index }"
                @click="getLocationData(index, item.id)"
              >
                {{ item.name }}
              </el-button>
            </div>
            <div v-else>暂无库区，去新增库区</div>
          </div>
        </el-card>
      </el-col>
      <!-- 右边试图 -->
      <el-col :span="17" class="rightView">
        <el-card>
          <!-- 计算说明 -->
          <el-row style="margin: 20px" type="flex" justify="space-between">
            <el-col :span="4" class="bgc-pink"> 库区总览 </el-col>
            <el-col :span="19" class="bgc-skyblue">
              <div class="item">
                <span>库存总计：</span> {{ overviews.total }}
              </div>
              <div class="item">
                <span class="color-stop" /><span>停用库位：</span>
                {{ overviews.stop }}
              </div>
              <div class="item">
                <span class="color-use" /><span>占用库位：</span>
                {{ overviews.use }}
              </div>
              <div class="item">
                <span class="color-free" /><span>空闲库位：</span>
                {{ overviews.free }}
              </div>
            </el-col>
          </el-row>

          <!-- 图示 -->
          <div v-if="list.length > 0" class="views">
            <div
              v-for="(item, index) in list"
              :key="index"
              class="item"
              :class="{
                stop: item === 'stop',
                use: item === 'use',
                free: item === 'free',
              }"
            />
          </div>
          <div v-else>暂无库位，去新增库位</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
// 获取所有仓库
import { getWarehouseList } from '@/api/warehouse'
// 获取当前仓库的所有库区 获取当前库区所有库位
import { getAreaById, getLocationViews } from '@/api/location-views'
export default {

  data() {
    return {
      options: [],
      warehouseId: '',
      input: '',
      areaList: [],
      activeIndex: 0,
      overviews: {},
      areaId: '',
      list: []
    }
  },
  async created() {
    await this.getWarehouseData()
    this.warehouseId = this.options[0].value
    await this.getAreaData(this.warehouseId)
    this.areaId = this.areaList[0].id
    await this.getLocationData(0, this.areaId)
  },

  methods: {
    async getWarehouseData() {
      // 获取仓库
      this.options = (await getWarehouseList(1)).data.data.map(item => {
        return { value: item.id, label: item.name }
      })
    },
    // 获取库区
    async getAreaData(id) {
      const res = (await getAreaById(id)).data.data

      if (res.length > 0) {
        this.areaList = res.map(item => {
          return { name: item.name, id: item.id }
        })
        this.getLocationData(0, this.areaList[0].id)
      } else {
        this.areaList = []
        this.list = []
        for (const key in this.overviews) {
          this.overviews[key] = 0
        }
      }
    },
    async getLocationData(index, id) {
      this.activeIndex = index
      const res = (await getLocationViews(id)).data.data
      this.overviews = res
      this.list = []
      this.getList()
    },
    getList() {
      for (const key in this.overviews) {
        const bool = key === 'stop' || key === 'use' || key === 'free'
        if (bool && this.overviews[key] > 0) {
          for (let i = 0; i < this.overviews[key]; i++) { this.list.push(key) }
        }
      }
    }
  }
}
</script>
<style scoped lang="scss">
@import "@/styles/location-view.scss";
</style>
